<template>
  <ContentWrap>
    <div class="btnWrap routeHeader">
      <div>
        <el-button @click="createShipmentOrder" v-hasPermi="['produce:production-shipping-task-order:createShipmentOrder']" v-if="route.query.type == 'update'" type="primary">创建备货申请单</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
  </ContentWrap>

  <ContentWrap>
    <div>基本信息</div>
    <el-form class="-mb-5px" :model="queryParam" :inline="true" label-width="110px">
      <div>
        <el-form-item label="订单号" prop="orderNumber">
          <div class="select-wrapper">
            <el-input v-model="queryParam.orderNumber" disabled class="!w-220px" />
          </div>
        </el-form-item>
        <el-form-item label="订单类型" prop="dictOrderType">
          <el-select
            v-model="queryParam.dictOrderType"
            placeholder=""
            clearable
            class="!w-220px"
            disabled
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(DICT_TYPE.MARKET_ORDER_TYPE)"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户代码" prop="customerCode">
          <el-input v-model="queryParam.customerCode" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryParam.customerName" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品编码" prop="productNumber">
          <el-input v-model="queryParam.productNumber" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="queryParam.productName" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="产品规格" prop="productStandard">
          <el-input v-model="queryParam.productStandard" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="订单数量" prop="orderQuantity">
          <el-input v-model="queryParam.orderQuantity" class="!w-220px" disabled />
        </el-form-item>
        <el-form-item label="单位" prop="dictUnit">
          <el-select
            v-model="queryParam.dictUnit"
            placeholder=""
            clearable
            class="!w-220px"
            disabled
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(DICT_TYPE.ORDER_PRODUCT_UNIT)"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="dictStatus">
          <el-select
            v-model="queryParam.dictStatus"
            placeholder=""
            clearable
            class="!w-220px"
            disabled
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(DICT_TYPE.SHIPPING_TASK_ORDER_STATUS)"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <div class="btnWrap">
      <div>发货信息</div>
      <div> </div>
    </div>
    <el-table :data="list" v-loading="loading" :height="tableHeight" border>
      <el-table-column type="index" width="55" label="序号" align="center" />
      <!-- 列定义 -->
      <el-table-column align="left" >
        <template #header>
          <span>清单编号</span>
        </template>
        <template #default="scope"> {{ scope.row.prepareNumber }} </template>
      </el-table-column>
      <el-table-column align="left" >
        <template #header>
          <span>清单状态</span>
        </template>
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.DICT_PREPARE_STATUS" :value="scope.row.dictPrepareStatus" />
        </template>
      </el-table-column>
      <el-table-column align="left">
        <template #header>
          <span>创建人</span>
        </template>
        <template #default="scope"> {{ scope.row.creatorName }} </template>
      </el-table-column>
      <el-table-column align="left" >
        <template #header>
          <span>创建时间</span>
        </template>
        <template #default="scope"> {{ timestampToDateTime(scope.row.createTime) }} </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>

<script lang="ts" setup>
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import { useRoute } from 'vue-router'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import * as ProductionShippingTaskOrderApi from '@/api/produce/productionShippingTaskOrder'
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const route = useRoute()
  const queryParam = reactive({
    orderNumber: undefined,
    dictOrderType: undefined,
    customerCode: undefined,
    customerName: undefined,
    productNumber: undefined,
    productName: undefined,
    productStandard: undefined,
    inventoryNumber: undefined,
    orderQuantity:undefined,
    dictUnit: undefined,
    dictStatus: undefined,
    id:undefined
  })
  const { push } = useRouter()
  const loading = ref(true)
  const list = ref<any>([])
  let title = ref('新增订单信息')
  const timestampToDateTime = (timestamp) => {
    if (timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      const hours = ('0' + date.getHours()).slice(-2)
      const minutes = ('0' + date.getMinutes()).slice(-2)
      const seconds = ('0' + date.getSeconds()).slice(-2)
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    } else {
      return ''
    }
  }
  /**创建发货单 */
  const createShipmentOrder = ()=>{
    console.log(queryParam)
    const params = new URLSearchParams(queryParam).toString();
    push(`/produce/produce/productManagement/productionPrepareEdit?${params}&type=createShipmentOrder`)
  }
  /**关闭 */
  const close = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/produce/produce/productManagement/productionShippingTaskOrder')
  }

  //获取详情数据
  const getProductionShippingTaskOrder = async (id) => {
    loading.value = true
    try {
      const data =await ProductionShippingTaskOrderApi.getProductionShippingTaskOrder(id)
      queryParam.orderNumber=data.basicInfo.orderNumber;
      queryParam.dictOrderType=data.basicInfo.dictOrderType;
      queryParam.customerCode=data.basicInfo.customerCode;
      queryParam.customerName=data.basicInfo.customerName;
      queryParam.productNumber=data.basicInfo.productNumber;
      queryParam.productName=data.basicInfo.productName;
      queryParam.productStandard=data.basicInfo.productStandard;
      queryParam.inventoryNumber=data.basicInfo.inventoryNumber;
      queryParam.orderQuantity=data.basicInfo.orderQuantity;
      queryParam.dictUnit=data.basicInfo.dictUnit;
      queryParam.dictStatus=data.basicInfo.dictStatus;
      queryParam.id=data.basicInfo.id;
      list.value = data.shippingInfo
    } finally {
      loading.value = false
    }
  }
  // 初始化
  const tableHeight = ref(0)
  onMounted(async () => {
    // const queryParamsHeight = queryFormRef.value.$el.clientHeight + 20
    tableHeight.value = document.body.clientHeight - 450
    let type = route.query.type
    if (type === 'create') {
      title.value = '新增订单信息'
    } else {
      title.value = '编辑订单信息'
    }
    getProductionShippingTaskOrder(route.query.id)
  })
</script>
<style lang="scss" scoped>
  .contentView {
    padding: 10px;
    background: #fff;
  }
  .tableView {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
        text-align: center;
      }
    }
  }
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-table .custom-header::before {
    content: '*';
    color: red;
    margin-right: 4px; /* 根据需要调整小红星与字段的位置 */
  }
  .dropdown-width {
    width: 50px !important;
  }
  :deep(.el-form .el-input, .el-form .el-input__wrapper, .el-form .el-textarea) {
    width: 100% !important;
  }
  .select-wrapper {
    display: flex;
    align-items: center;
  }

  .search-icon {
    margin-left: -24px; /* 这里的 -24px 是根据 Icon 的宽度进行调整的 */
    cursor: pointer;
    margin-top: 5px;
  }
</style>
